<template>
  <ai-chat ref="aiChat" :model-id="selectedModelId" @ai-message="handleAIMessage"
    @loading="handleLoading" @error="handleGenerateError" style="display: none"></ai-chat>
  <view class="ios18-container" ref="page">
    <!-- iOS 18 Style Header -->
    <view class="ios18-header" :style="{ paddingTop: statusBarHeight + 'rpx' }">
      <view class="header-content">
        <view class="header-left" @click="goBack">
          <my-icon name="close" width="48rpx" height="48rpx" color="#ffffff" />
        </view>
        <view class="header-title">创建智能体</view>
        <view class="header-right">
          <view class="auto-generate-button" @click="showGenerateModal">
            <my-icon name="ri:magic-wand" width="36rpx" height="36rpx" color="#ffcc00" />
            <text class="auto-generate-text">自动生成</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 头部占位元素 -->
    <view class="header-placeholder" :style="{ height: (statusBarHeight + 88 + 32) + 'rpx' }"></view>

    <view class="ios18-form">
      <!-- 单一面板 -->
      <view class="ios18-section">
        <!-- 头像区域 -->
        <view class="avatar-section">
          <view class="avatar-wrapper" @click="chooseImage">
            <image class="avatar-image" :src="formData.avatar || '/static/avatars/default.png'" mode="aspectFill">
            </image>
            <view class="avatar-edit-btn">
              <my-icon name="edit" width="40rpx" height="40rpx" color="#ffffff" />
            </view>
          </view>
          <text class="avatar-tip">点击更换头像</text>
        </view>

        <!-- 昵称 -->
        <view class="ios18-form-group">
          <text class="ios18-form-label">昵称 <text class="required-mark">*</text></text>
          <input class="ios18-form-input" v-model="formData.name" placeholder="给你的智能体命名" />
        </view>

        <view class="ios18-form-group">
          <text class="ios18-form-label">角色描述</text>
          <textarea class="ios18-form-textarea" v-model="formData.description" placeholder="请输入角色描述" :autoHeight="true" />
        </view>

        <view class="ios18-form-group">
          <text class="ios18-form-label">角色设定</text>
          <textarea class="ios18-form-textarea ios18-prompt-textarea" v-model="formData.prompt"
            placeholder="请输入角色设定提示词" :autoHeight="true" />
        </view>

        <view class="ios18-form-group">
          <text class="ios18-form-label">打招呼消息</text>
          <textarea class="ios18-form-textarea" v-model="formData.greeting" placeholder="请输入角色的打招呼消息" :autoHeight="true" />
        </view>
      </view>
    </view>

    <!-- 底部占位元素 -->
    <view class="footer-placeholder" style="height: 140rpx;"></view>

    <!-- Action Buttons -->
    <view class="action-buttons">
      <view class="create-btn" @click="saveRole">创建智能体</view>
    </view>
  </view>

  <!-- Generate Modal -->
  <view class="ios18-modal" v-if="showModal">
    <view class="modal-backdrop" @click="hideGenerateModal"></view>
    <view class="modal-card" :class="{ 'modal-show': showModal }">
      <view class="modal-header">
        <text class="modal-title">智能生成角色</text>
        <view class="modal-close" @click="hideGenerateModal">
          <my-icon name="close" width="48rpx" height="48rpx" color="#ffffff" />
        </view>
      </view>

      <view class="modal-body">
        <view class="ios18-form-group">
          <text class="ios18-form-label">角色描述</text>
          <textarea class="ios18-form-textarea" v-model="shortDescription" placeholder="请输入角色描述，例如：一个擅长写诗的唐朝诗人" :autoHeight="true" />
        </view>

        <view class="ios18-form-group">
          <text class="ios18-form-label">选择模型</text>
          <view class="ios18-custom-dropdown" @click="toggleModelDropdown">
            <view class="ios18-dropdown-header">
              <text class="ios18-dropdown-text">{{ selectedModelName }}</text>
              <my-icon :name="showModelDropdown ? 'chevron-up' : 'chevron-down'" width="36rpx" height="36rpx"
                color="#86868b" />
            </view>
            <view class="ios18-dropdown-options" v-if="showModelDropdown">
              <view v-for="model in models" :key="model.id" class="ios18-dropdown-option"
                :class="{ 'ios18-option-selected': selectedModelId === model.id }"
                @click.stop="selectModelAndClose(model.id)">
                <text class="ios18-option-name">{{ model.name }}</text>
                <text class="ios18-option-desc">{{ model.description }}</text>
                <my-icon v-if="selectedModelId === model.id" name="check" width="36rpx" height="36rpx"
                  color="#0a84ff" />
              </view>
            </view>
          </view>
        </view>

        <view class="generate-status" v-if="isGenerating">
          <view class="loading-animation">
            <my-icon name="loading" width="48rpx" height="48rpx" color="#0a84ff" />
          </view>
          <text class="loading-text">正在生成中，请稍候...</text>
        </view>
      </view>

      <view class="modal-footer">
        <view class="modal-buttons">
          <my-button class="ios18-cancel-btn" @click="hideGenerateModal">取消</my-button>
          <my-button class="ios18-generate-btn" type="primary" @click="generateRole"
            :disabled="isGenerating || !shortDescription.trim()">生成</my-button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import roleService from '@/utils/roleService.js';
import modelManager from '@/store/model.js'
import settingsManager from '@/store/settings.js'

export default {

  data() {
    return {
      statusBarHeight: 20,
      isEdit: false,
      showModal: false,
      shortDescription: '',
      isGenerating: false,
      generatedContent: '',
      selectedModelId: 'gpt-3.5-turbo',
      models: [],
      showModelDropdown: false,
      formData: {
        id: '',
        name: '',
        avatar: '/static/avatars/default.png',
        description: '',
        prompt: '',
        greeting: '',
        isCustom: true,
        isAdult: false,
        model: '',
        gender: 'male'
      },
      showReasoning: false,
      hasNewReasoning: false,
      generationKeywords: '',
      generationStyle: '',
      generationTone: ''
    }
  },
  computed: {
    selectedModelName() {
      const model = this.models.find(m => m.id === this.selectedModelId)
      return model ? model.name : '默认模型'
    },
    modelNames() {
      return this.models.map(model => model.name)
    },
    modelIndex() {
      return this.models.findIndex(model => model.id === this.selectedModelId)
    },
    generatePrompt() {
      return `你是一个专业的角色创建助手，负责生成角色配置。
基于用户的简短描述，你需要创建一个完整的角色配置，包括角色名称(name)、角色描述(description)、详细的角色设定(prompt)和打招呼消息(greeting)。

用户的描述是：${this.shortDescription || '(用户未提供描述)'}

请按照以下JSON格式返回角色配置：
{
  "name": "角色名称",
  "description": "角色简介，不超过50字",
  "prompt": "详细的角色设定和背景，包括语言风格、专业领域、性格特点等，应该有200-500字的详细描述",
  "greeting": "角色的打招呼消息，表现角色特点"
}

注意：
1. 确保返回的是有效的JSON格式
2. 描述应当具体且有个性化的细节
3. 根据角色特点调整语言风格
4. 只返回JSON对象，不要有任何前缀或说明
5. prompt部分要足够详细，这是角色的核心设定
6. 不要包含与用户描述无关的内容`
    }
  },
  onLoad(options) {
    // 检查登录状态
    if (!settingsManager.isLoggedIn) {
      uni.showToast({
        title: '请先登录后再创建角色',
        icon: 'none',
        duration: 2000
      });
      
      // 延迟跳转到登录页面
      setTimeout(() => {
        uni.navigateTo({
          url: '/pages/user/login'
        });
      }, 1500);
      return;
    }

    uni.getSystemInfo({
      success: res => {
        // 将状态栏高度转换为rpx
        const rpxRatio = 750 / res.windowWidth;
        this.statusBarHeight = res.statusBarHeight * rpxRatio;
        document.documentElement.style.setProperty('--status-bar-height',
          `${this.statusBarHeight}rpx`);
      }
    })

    this.models = modelManager.models

    if (options.id) {
      this.isEdit = true
      this.loadRole(options.id)
    } else {
      this.selectedModelId = modelManager.currentModel
    }
  },
  methods: {
    goBack() {
      uni.navigateBack()
    },
    chooseImage() {
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: res => {
          this.formData.avatar = res.tempFilePaths[0]
        }
      })
    },
    selectModel(modelId) {
      this.selectedModelId = modelId
      this.formData.model = modelId
    },
    onModelChange(e) {
      const index = e.detail.value
      const modelId = this.models[index].id
      this.selectModel(modelId)
    },
    showGenerateModal() {
      this.showModal = true
      this.shortDescription = ''
      this.isGenerating = false

      if (!this.selectedModelId) {
        this.selectedModelId = modelManager.currentModel
      }
    },
    hideGenerateModal() {
      this.showModal = false
    },
    async generateRole() {
      if (!this.shortDescription.trim()) {
        uni.showToast({
          title: '请输入角色描述',
          icon: 'none'
        })
        return
      }

      this.isGenerating = true
      // 重置生成内容
      this.generatedContent = '';

      console.log('开始生成角色，使用模型：', this.selectedModelId)

      try {
        // 构建系统提示
        const systemPrompt = `你是一个专业的角色创建助手，负责生成角色配置。
基于用户的简短描述，你需要创建一个完整的角色配置，包括角色名称(name)、角色描述(description)、详细的角色设定(prompt)和打招呼消息(greeting)。

用户的描述是：${this.shortDescription || '(用户未提供描述)'}

请按照以下JSON格式返回角色配置：
{
  "name": "角色名称",
  "description": "角色简介，不超过50字",
  "prompt": "详细的角色设定和背景，包括语言风格、专业领域、性格特点等，应该有200-500字的详细描述",
  "greeting": "角色的打招呼消息，表现角色特点"
}

注意：
1. 确保返回的是有效的JSON格式
2. 描述应当具体且有个性化的细节
3. 根据角色特点调整语言风格
4. 只返回JSON对象，不要有任何前缀或说明
5. prompt部分要足够详细，这是角色的核心设定
6. 不要包含与用户描述无关的内容`;

        // 创建包含系统提示的消息历史
        const messages = [
          { role: 'system', content: systemPrompt }
        ];
        
        // 使用aiChat组件发送消息
        this.$refs.aiChat.sendMessage('', messages, this.selectedModelId)
      } catch (error) {
        console.error('生成角色失败：', error)
        uni.showToast({
          title: '生成失败，请重试',
          icon: 'none'
        })
        this.isGenerating = false
      }
    },
    handleAIMessage(delta) {
      if (!this.generatedContent) {
        this.generatedContent = '';
        // 收到第一个消息时自动关闭模态框
        this.hideGenerateModal();

        // 显示生成中的提示
        uni.showToast({
          title: 'AI开始生成角色',
          icon: 'none',
          duration: 2000
        });
      }

      if (delta.content) {
        console.log('收到AI增量消息：', delta.content)
        this.generatedContent += delta.content

        try {
          // 改进的JSON提取逻辑
          // 尝试找到完整的JSON对象，处理可能的多余文本
          const jsonRegex = /\{(?:[^{}]|(?:\{(?:[^{}]|(?:\{[^{}]*\}))*\}))*\}/g;
          const matches = this.generatedContent.match(jsonRegex);

          let jsonFound = false;

          if (matches && matches.length > 0) {
            // 尝试解析找到的每个可能的JSON对象
            for (let i = matches.length - 1; i >= 0; i--) {
              try {
                const jsonStr = matches[i];
                console.log('尝试解析JSON字符串：', jsonStr);

                const generatedRole = JSON.parse(jsonStr);
                console.log('解析后的角色数据：', generatedRole);

                // 验证JSON是否包含必要的角色字段
                if (generatedRole && (generatedRole.name || generatedRole.description || generatedRole.prompt)) {
                  // 更新基本表单字段
                  if (generatedRole.name) this.formData.name = generatedRole.name;
                  if (generatedRole.description) this.formData.description = generatedRole.description;
                  if (generatedRole.prompt) this.formData.prompt = generatedRole.prompt;
                  if (generatedRole.greeting) this.formData.greeting = generatedRole.greeting;

                  // 保存选中的模型到角色数据
                  this.formData.model = this.selectedModelId;

                  uni.showToast({
                    title: '生成成功',
                    icon: 'success'
                  });

                  jsonFound = true;
                  // 找到有效的JSON后退出循环
                  break;
                }
              } catch (parseError) {
                console.error('解析特定JSON匹配失败：', parseError);
                // 继续尝试下一个匹配
              }
            }
          }

          // 如果复杂正则表达式方法失败，尝试更简单的方法
          if (!jsonFound) {
            // 尝试查找最后一个完整的JSON对象
            const startIndex = this.generatedContent.lastIndexOf('{');
            const endIndex = this.generatedContent.lastIndexOf('}');

            if (startIndex !== -1 && endIndex !== -1 && endIndex > startIndex) {
              try {
                const jsonStr = this.generatedContent.substring(startIndex, endIndex + 1);
                console.log('备用方法 - 尝试解析JSON字符串：', jsonStr);

                const generatedRole = JSON.parse(jsonStr);

                // 验证JSON是否包含必要的角色字段
                if (generatedRole && (generatedRole.name || generatedRole.description || generatedRole.prompt)) {
                  // 更新基本表单字段
                  if (generatedRole.name) this.formData.name = generatedRole.name;
                  if (generatedRole.description) this.formData.description = generatedRole.description;
                  if (generatedRole.prompt) this.formData.prompt = generatedRole.prompt;
                  if (generatedRole.greeting) this.formData.greeting = generatedRole.greeting;

                  // 保存选中的模型到角色数据
                  this.formData.model = this.selectedModelId;

                  uni.showToast({
                    title: '生成成功',
                    icon: 'success'
                  });
                }
              } catch (backupError) {
                console.error('备用方法解析JSON失败：', backupError);
              }
            }
          }
        } catch (error) {
          console.error('处理AI消息失败：', error, '原始消息：', delta.content);
          // 解析错误，继续接收数据
          console.log('解析JSON出错，继续接收数据');
        }
      }
    },
    handleLoading(loading) {
      this.isGenerating = loading
      if (!loading) {
        // 生成完成，如果没有成功解析JSON，显示提示
        if (this.generatedContent && !this.formData.name) {
          console.error('生成结果解析失败，原始内容：', this.generatedContent);

          // 尝试最后一次解析
          try {
            // 尝试清理内容，移除可能的非JSON文本
            let cleanedContent = this.generatedContent;

            // 尝试找到最后一个完整的JSON对象
            const startIndex = cleanedContent.lastIndexOf('{');
            const endIndex = cleanedContent.lastIndexOf('}');

            if (startIndex !== -1 && endIndex !== -1 && endIndex > startIndex) {
              const jsonStr = cleanedContent.substring(startIndex, endIndex + 1);
              console.log('最后尝试解析JSON：', jsonStr);

              const generatedRole = JSON.parse(jsonStr);

              if (generatedRole && (generatedRole.name || generatedRole.description || generatedRole.prompt)) {
                // 更新基本表单字段
                if (generatedRole.name) this.formData.name = generatedRole.name;
                if (generatedRole.description) this.formData.description = generatedRole.description;
                if (generatedRole.prompt) this.formData.prompt = generatedRole.prompt;
                if (generatedRole.greeting) this.formData.greeting = generatedRole.greeting;

                // 保存选中的模型到角色数据
                this.formData.model = this.selectedModelId;

                uni.showToast({
                  title: '生成成功',
                  icon: 'success'
                });

                return;
              }
            }
          } catch (finalError) {
            console.error('最终解析尝试失败：', finalError);
          }

          uni.showToast({
            title: '生成结果解析失败，请重试',
            icon: 'none',
            duration: 2000
          });
        } else if (!this.isGenerating && this.formData.name) {
          uni.showToast({
            title: '生成完成',
            icon: 'success'
          });
        }
      }
    },
    handleGenerateError(err) {
      // 如果是SSE连接关闭，不显示错误提示
      if (err?.type === 'SSE_CLOSED') {
        console.log('SSE连接已关闭')
        this.isGenerating = false
        return
      }

      this.isGenerating = false
      console.error('生成错误：', err)
      uni.showToast({
        title: '生成失败: ' + (err.message || '未知错误'),
        icon: 'none',
        duration: 2000
      })
    },
    async saveRole() {
      if (!this.formData.name.trim()) {
        uni.showToast({
          title: '请输入角色名称',
          icon: 'none'
        })
        return
      }

      // 如果没有设置description，生成一个简短描述
      if (!this.formData.description) {
        this.formData.description = `${this.formData.name}角色`
      }

      // 保存选中的模型到角色数据
      if (this.selectedModelId) {
        this.formData.model = this.selectedModelId
      }

      try {
        let result;

        if (this.isEdit) {
          // 使用全局$req方法更新角色
          result = await this.$req.roles.updateRole(this.formData);
        } else {
          // 使用全局$req方法添加角色
          result = await this.$req.roles.addRole(this.formData);
        }

        if (result.errCode === 0) {
          uni.showToast({
            title: '保存成功',
            icon: 'success'
          });

          // 触发角色更新事件
          uni.$emit('role-updated');

          setTimeout(() => {
            uni.navigateBack()
          }, 1500)
        } else {
          console.error('[角色编辑] 保存角色失败:', result.errMsg);
          uni.showToast({
            title: '保存失败',
            icon: 'none'
          });
        }
      } catch (error) {
        console.error('[角色编辑] 保存角色异常:', error);
        uni.showToast({
          title: error.message || '保存失败',
          icon: 'none'
        })
      }
    },
    async deleteRole() {
      uni.showModal({
        title: '确认删除',
        content: '确定要删除这个角色吗？',
        success: async res => {
          if (res.confirm) {
            try {
              // 使用全局$req方法删除角色
              const result = await this.$req.roles.deleteRole(this.formData.id);

              if (result.errCode === 0) {
                uni.showToast({
                  title: '删除成功',
                  icon: 'success'
                });

                // 触发角色更新事件
                uni.$emit('role-updated');

                setTimeout(() => {
                  uni.navigateBack()
                }, 1500)
              } else {
                console.error('[角色编辑] 删除角色失败:', result.errMsg);
                uni.showToast({
                  title: '删除失败',
                  icon: 'none'
                });
              }
            } catch (error) {
              console.error('[角色编辑] 删除角色异常:', error);
              uni.showToast({
                title: error.message || '删除失败',
                icon: 'none'
              })
            }
          }
        }
      })
    },
    toggleModelDropdown() {
      this.showModelDropdown = !this.showModelDropdown;
    },
    selectModelAndClose(modelId) {
      this.selectModel(modelId);
      this.showModelDropdown = false;
    },
    async loadRole(id) {
      try {
        // 使用全局$req方法获取角色信息
        const result = await this.$req.roles.getRoleById(id);

        if (result.errCode === 0 && result.data) {
          this.formData = result.data;
        } else {
          console.error('[角色编辑] 加载角色失败:', result.errMsg);
          uni.showToast({
            title: '加载角色失败',
            icon: 'none'
          });
        }
      } catch (error) {
        console.error('[角色编辑] 加载角色异常:', error);
        uni.showToast({
          title: '加载角色失败',
          icon: 'none'
        });
      }
    },
    selectGender(gender) {
      this.formData.gender = gender;
    },
  }
}
</script>

<style>
/* iOS 18 Style Container */
.ios18-container {
  background-color: rgb(18, 18, 20);
  min-height: 100vh;
  position: relative;
  color: #ffffff;
}

/* 占位元素样式 */
.header-placeholder {
  width: 100%;
}

.footer-placeholder {
  width: 100%;
}

/* iOS 18 Style Header */
.ios18-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background-color: rgb(18, 18, 20);
  border-bottom: 0.5rpx solid rgba(255, 255, 255, 0.1);
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 88rpx;
  padding: 0 32rpx;
}

.header-left,
.header-right {
  flex: 1;
  display: flex;
  align-items: center;
}

.header-right {
  justify-content: flex-end;
}

.header-title {
  font-size: 34rpx;
  font-weight: 600;
  color: #ffffff;
  text-align: center;
  flex: 2;
}

.auto-generate-button {
  display: flex;
  align-items: center;
  gap: 8rpx;
}

.auto-generate-text {
  font-size: 24rpx;
  color: #ffcc00;
}

/* iOS 18 Scroll View */
.ios18-scroll-view {
  height: calc(100vh - 88rpx - var(--status-bar-height) - 164rpx);
  /* 减去底部按钮的高度 */
  margin-top: calc(88rpx + var(--status-bar-height));
  padding-bottom: 32rpx;
}

/* iOS 18 Form */
.ios18-form {
  padding: 32rpx 24rpx;
  margin-top: 0;
  margin-bottom: 0;
  padding-bottom: 32rpx;
}

/* iOS 18 Sections */
.ios18-section {
  background-color: rgb(41, 42, 46);
  border-radius: 32rpx;
  padding: 24rpx;
}

/* iOS 18 Form Groups */
.ios18-form-group {
  margin-bottom: 32rpx;
}

.ios18-form-group:last-child {
  margin-bottom: 0;
}

.ios18-form-label {
  font-size: 30rpx;
  font-weight: 500;
  color: #ffffff;
  margin-bottom: 12rpx;
  display: block;
}

.required-mark {
  color: #ff453a;
}

.ios18-form-input {
  width: 100%;
  height: 88rpx;
  background-color: #3a3a3c;
  border: none;
  border-radius: 20rpx;
  padding: 0 24rpx;
  font-size: 32rpx;
  color: #ffffff;
}

.ios18-form-input::placeholder {
  color: #86868b;
}

.ios18-form-textarea {
  width: 100%;
  min-height: 160rpx;
  background-color: #3a3a3c;
  border: none;
  border-radius: 20rpx;
  padding: 24rpx;
  font-size: 32rpx;
  line-height: 1.5;
  color: #ffffff;
}

.ios18-form-textarea::placeholder {
  color: #86868b;
}

.ios18-prompt-textarea {
  background-color: rgba(10, 132, 255, 0.1);
  border: 1rpx solid rgba(10, 132, 255, 0.3);
}

/* 性别选择器样式 */
.gender-selector {
  display: flex;
  gap: 24rpx;
  width: 100%;
  margin-top: 16rpx;
}

.gender-option {
  flex: 1;
  padding: 24rpx 0;
  border: 1rpx solid rgba(255, 255, 255, 0.2);
  border-radius: 50rpx;
  text-align: center;
  font-size: 32rpx;
  color: #ffffff;
  background-color: #2c2c2e;
  transition: all 0.2s ease;
}

.gender-selected {
  background-color: rgba(10, 132, 255, 0.3);
  border-color: #0a84ff;
}

/* 底部按钮 */
.action-buttons {
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24rpx 32rpx;
  background-color: rgb(18, 18, 20);
  justify-content: center;
}

.create-btn {
  width: 360rpx;
  height: 80rpx;
  background-color: #d4a520; /* 改为更柔和的金黄色 */
  border-radius: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30rpx;
  font-weight: 600; /* 字体加粗 */
  color: #000000; /* 恢复黑色文字 */
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.2);
}

/* iOS 18 Modal */
.ios18-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8rpx);
  -webkit-backdrop-filter: blur(8rpx);
}

.modal-card {
  position: relative;
  width: 90%;
  max-width: 1200rpx;
  background-color: #2c2c2e;
  border-radius: 32rpx;
  box-shadow: 0 16rpx 48rpx rgba(0, 0, 0, 0.3);
  transform: translateY(40rpx);
  opacity: 0;
  transition: all 0.3s ease;
}

.modal-show {
  transform: translateY(0);
  opacity: 1;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32rpx;
  border-bottom: 1rpx solid rgba(255, 255, 255, 0.1);
}

.modal-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #ffffff;
}

.modal-close {
  padding: 8rpx;
}

.modal-body {
  padding: 32rpx;
}

.modal-footer {
  padding: 32rpx;
  border-top: 1rpx solid rgba(255, 255, 255, 0.1);
}

.modal-buttons {
  display: flex;
  gap: 24rpx;
}

.ios18-cancel-btn,
.ios18-generate-btn {
  flex: 1;
  height: 88rpx;
  border-radius: 44rpx;
  font-size: 32rpx;
  font-weight: 600;
}

.ios18-generate-btn {
  background-color: #ffcc00 !important;
  color: #000000 !important;
}

/* Loading Animation */
.loading-animation {
  display: flex;
  align-items: center;
  margin-right: 24rpx;
}

.generate-status {
  display: flex;
  align-items: center;
  margin-top: 32rpx;
  padding: 24rpx;
  background-color: rgba(10, 132, 255, 0.1);
  border-radius: 20rpx;
}

.loading-text {
  font-size: 28rpx;
  color: #ffffff;
}

/* 自定义下拉框样式 */
.ios18-custom-dropdown {
  position: relative;
  width: 100%;
  z-index: 10;
}

.ios18-dropdown-header {
  width: 100%;
  height: 88rpx;
  background-color: #3a3a3c;
  border: none;
  border-radius: 20rpx;
  padding: 0 24rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

.ios18-dropdown-text {
  font-size: 32rpx;
  color: #ffffff;
}

.ios18-dropdown-options {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 8rpx;
  background-color: #2c2c2e;
  border-radius: 20rpx;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.3);
  max-height: 600rpx;
  overflow-y: auto;
  z-index: 100;
}

.ios18-dropdown-option {
  padding: 24rpx 32rpx;
  border-bottom: 1rpx solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  position: relative;
}

.ios18-dropdown-option:last-child {
  border-bottom: none;
}

.ios18-dropdown-option:active {
  background-color: rgba(255, 255, 255, 0.05);
}

.ios18-option-selected {
  background-color: rgba(10, 132, 255, 0.2);
}

.ios18-option-name {
  font-size: 32rpx;
  font-weight: 500;
  color: #ffffff;
  margin-bottom: 8rpx;
}

.ios18-option-desc {
  font-size: 24rpx;
  color: #86868b;
  padding-right: 48rpx;
}

/* Avatar Section */
.avatar-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 24rpx;
}

.avatar-wrapper {
  position: relative;
  width: 240rpx;
  height: 240rpx;
  border-radius: 120rpx;
  overflow: hidden;
  margin-bottom: 16rpx;
  border: 4rpx solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.2);
}

.avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-edit-btn {
  position: absolute;
  bottom: 12rpx;
  right: 12rpx;
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  width: 72rpx;
  height: 72rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar-tip {
  font-size: 28rpx;
  color: #86868b;
  margin-top: 8rpx;
}
</style>
